/**
 * Diff
 * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#diff
 */
@import (less) "less/font-families.less";

// stylelint-disable selector-max-specificity
#legend {
  float: left;
  font-size: 11px;
  font-family: @lucida_sans_serif-6;
  line-height: 1em;
  margin-top: 20px;
}

#legend dl,
dd {
  float: left;
  padding: 0;
  margin: 0;
}

#legend dd {
  padding: 5px;
  border: 1px solid @lightest-grey;
  margin-right: 5px;
}

#legend .mod {
  background-color: @orange-three;
}

#legend .rem {
  color: @red;
  text-decoration: line-through;
}

#legend .add {
  background-color: @light-olive-2;
}

#legend .unmod {
  background-color: @lightest-grey;
}

/* Diff comparison table */

.diff .revisions {
  clear: both;
  margin-top: 20px;
  padding: 0;
  float: left;
  width: 100%;
}

.diff .revisions th {
  padding: 10px;
  font-family: @news_gothic_sans_serif-2;
  font-size: 11px;
  font-weight: 700;
  color: @black;
}

.diff .revisions .heading {
  text-transform: uppercase;
}

.diff .revisions td {
  padding: 10px;
  font-family: @lucida_console_monospace;
  background: @lightest-grey;
  vertical-align: top;
  font-size: .875em;
  border-right: 1px solid @white;
  border-bottom: 1px solid @white;
}

.revisions table {
  margin-top: 0;
}

td.r {
  padding-left: 12px;
  width: 50%;
}

/* .diff table tbody.mod td.l { background: @orange-three } */
.diff table tbody.mod td.r {
  background: @orange-three;
}
/* .diff table tbody.add td.l { background: @light-olive-2 } */
.diff table tbody.add td.r {
  background: @light-olive-2;
}

.diff table tbody.rem td.r {
  color: @red;
  text-decoration: line-through;
}

td.l {
  padding-left: 12px;
  width: 50%;
}

.diff table tbody.rem td.l {
  color: @red;
  text-decoration: line-through;
}

ins {
  background: @light-olive-2;
  text-decoration: none;
}

del {
  color: @red;
  text-decoration: line-through;
}

.diff table tbody.mod del,
.diff table tbody.mod ins {
  background: @magenta;
}
